<!-- 在线充值 URecharge -->
<template> 
    <div class="bg">
        <div v-show="isShowContent">
        <x-header :left-options="{backText: ''}" class="ret">
            <div class="retTitle">充值中心</div>
            <!-- <a slot="right" @click="rechargeRecord" style="fill:#fff;">充值记录</a> -->
        </x-header> 
        <!-- <div style="padding-top:40px;padding-bottom:0px;"> 
            <img :src="bannerUrl" style="max-width:100%;"/>
        </div> -->
        <div style="padding:40px 20px 0px;background-color:#fff;">
            <x-hr></x-hr>
            <div style="font-size:12px">
                账户余额(元)：
            </div>
            <div>
                <countup :start-val="1" :end-val="balance" :duration="0.5" style="padding:10px 20px 10px;font-size:28px"></countup>
            </div>
        </div>

        <div style="background-color:#fff;margin-right:5px;margin-left:5px;">
            <group-title>充值</group-title>
            <div class="item-center">
                <checker v-model="item" default-item-class="item" :radio-required="true"
                    selected-item-class="item-selected">
                    <checker-item v-for="(item, i) in items" :key="i" :value="item" @on-item-click="onClick">
                        <div style="padding-top:5px;">
                            充值￥{{ item.chongzje }}<br/>送￥{{ item.zengsje }}
                        </div>
                    </checker-item>
                </checker>
            </div> 
        </div>

        <div class="item-center">
           金额：￥{{ money }}
        </div>

        <div class="btn_wrap">
            <x-button type="primary"  @click.native="rechargeChoose">我要充值</x-button>
        </div>

        <div v-transfer-dom>
            <popup v-model="showPopup" height="200px" is-transparent>
                <div style="width: 95%;background-color:#fff;height:180px;margin:0 auto;border-radius:5px;padding-top:10px;">
                
                    <div class="popup-font">
                        本次充值{{money}}元
                    </div>
                    <div style="padding:20px 15px;">
                        <x-button type="primary" @click.native="recharge">微信充值</x-button>
                        <x-button @click.native="showPopup = false">取消</x-button>
                    </div>
                </div>
            </popup>
        </div>
        </div>

        <div v-show="isShowMsg">
            <msg :title="msgTitle" :description="czDec" :buttons="buttons" :icon="icon"></msg>
        </div>
    </div> 
</template>

<script>
import { XHeader,XHr,Group,GroupTitle,Cell,Checker,Popup, CheckerItem,XButton,Msg,Countup, TransferDomDirective as TransferDom  } from 'vux'
import { sign, signStr } from "@/assets/js/sign.js";

export default {
    directives: {
        TransferDom
    },
  components: { XHeader,XHr,Group,GroupTitle,Cell,Checker,Popup, CheckerItem,XButton,Msg,Countup  },
  created() {
        this.create();
    },
    data () {
        return {
            openid: null,
            business: null, //商家信息
            item: null,     //某条充值活动信息
            bannerUrl: require("@/assets/img/banner.png"),
            showPopup: false,
            items: null,    //充值活动信息列表
            money: 0,   //充值金额
            balance: 0, //余额
            memberInfoSj: null,
            hdid: 0, 
            isShowContent: true,    //显示内容层
            isShowMsg: false,       //显示消息层
            buttons: [{
                type: 'primary',
                text: '返回首页',
                onClick: this.toCard.bind(this)
                // link: '/Member/'+
            }, 
            // {
            //     type: 'default',
            //     text: '查看记录',
            //     // link: '/MyBalance'
            //     onClick: this.toBalance.bind(this)
            // }
            ], 
            icon: "success",
            msgTitle: "充值成功",
            czDec: '',
            appId: "",
            timeStamp: "",
            nonceStr: "",
            package: "",
            signType: "",
            paySign: ""
        }
    }, 
    methods: {
        toCard(){
            // this.$router.push("/MyCard");
            this.$router.push("/Member/"+this.openid);
        },
        toBalance(){
            this.$router.push("/MyBalance");
        },
        create(){
            this.isShowContent = true;
            this.isShowMsg = false;

            this.openid = this.$store.getters.getMemberPtOpenId;
            this.business = this.$store.state.sellerInfo; 
            this.memberInfoSj = this.$store.state.memberInfoSj;

            if(this.memberInfoSj != null){
                let _balance = this.memberInfoSj.zhangsje;
                this.balance = _balance == null ? 0 : _balance;
            }
            this.getRechargeActivities();
        },
        //获取充值活动列表
        getRechargeActivities(){
            let urlparam = sign("/v1/api/member/RechargeActivities");  
            urlparam.append("sjid", this.business.id);

            this.$http.post("member/RechargeActivities", urlparam).then(ret => {  
                if (ret.status == 200) {
                    var _data = ret.data.resultObject;
                    var _code = ret.data.code || ret.data.result.code;
                    var _msg = ret.data.msg || ret.data.result.msg;

                    if (_code == 1) {
                        if (_data == "" || _data == "null" || _data == null) return;
                        
                        this.items = _data; 
                    } 
                }
             });
        },
        //勾选
        onClick(itemValue, itemDisabled){
            this.money = itemValue.chongzje;
            this.hdid = itemValue.id;
        },
        //选择充值方式
        rechargeChoose(){
            if(this.business.isOpenRecharge != 1){
                this.$vux.toast.show({ type: "cancel",text: "该功能暂未开始" }); 
                return;
            }else{ 
                if(this.money == 0){
                    this.$vux.toast.show({ type: "cancel",text: "未选择充值金额" }); 
                    return;
                }
                this.showPopup = true;
            }
        },
        //充值
        recharge(){
            let _hdid = this.hdid;
            let _openid = this.openid;
            if(_hdid == 0 || _hdid == null){
                this.$vux.toast.show({ type: "cancel",text: "充值有误，请重新选择" }); 
                return;
            }
            if(_openid == null || _openid == 'null'){
                this.$vux.toast.show({ type: "cancel",text: "微信会员ID为空" }); 
                return;
            }

            // console.log(JSON.stringify(this.memberInfoSj))

            let urlparam = sign("/v1/api/member/addRecharge");  
            urlparam.append("sjid", this.business.id);
            urlparam.append("hyptid", this.memberInfoSj.mpingtHyxxId);
            urlparam.append("hycxid", this.memberInfoSj.id);
            urlparam.append("czfsid", 2); //充值方式 2微信
            urlparam.append("hdid", _hdid);
            urlparam.append("openid", _openid);

            this.$http.post("member/addRecharge", urlparam).then(ret => {  
                if (ret.status == 200) {
                    var _data = ret.data.resultObject;
                    var _code = ret.data.code || ret.data.result.code;
                    var _msg = ret.data.msg || ret.data.result.msg;

                    if (_code == 1) {
                        // this.$store.commit("addMemberInfoSj", _data.hycx);
                        
                        this.appId = _data.appId;
                        this.timeStamp = _data.timeStamp;
                        this.nonceStr = _data.nonceStr;
                        this.package = _data.package;
                        this.signType = _data.signType;
                        this.paySign = _data.paySign;

                        this.wxpay(); 
                    }else{
                        
                    }
                }
             }); 
        },
        wxpay(){
            WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                    appId: this.appId,
                    timeStamp: this.timeStamp,
                    nonceStr: this.nonceStr,
                    package: this.package,
                    signType: this.signType,
                    paySign: this.paySign
                },
                res => {
                //            alert(JSON.stringify(res));
                //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。

                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    
                    this.isShowMsg = true;
                    this.isShowContent = false;
                    this.showPopup = false;

                    this.msgTitle = "充值成功";
                    this.icon = "success";
                    this.czDec = '本次充值'+this.item.chongzje +' 送'+this.item.zengsje
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    this.isShowMsg = false;
                    this.isShowContent = true;
                } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                    this.isShowMsg = false;
                    this.isShowContent = true; 
                    this.$vux.toast.show({ type: "cancel",text: "充值失败" }); 
                }
                }
            );
        },
        //跳转充值记录
        rechargeRecord(){
            this.$router.push("/MyBalance");
        }
    }
}
</script>

<style scoped lang="less">
.bg{
    background-color:#f7f7f7;  
}
 .ret {
    background-color:#fff;  
    background: #fff;
    width: 100%;
    // height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    font-size: 0.9rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 97;
 }
 .retTitle{
     color: #000;
     font-size: 14px;
 }

.btn_wrap {
    margin:0 auto;
    padding: 10px; 
    background-color:#fff; 
} 
 .popup-font {  
    padding:10px 5px 1px;
    display: block;
    text-align: center;
    color: #525252;
    font-size: 1.2em;
    font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;
}
 .item-center {  
    padding:10px 5px 10px;
    display: block;
    text-align: center;
    color: #525252;
    font-size: 0.9em;
    font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;
}
.item { 
    width: 100px;
    height: 56px;
    line-height: 26px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #1AAD19;
    color:  #1AAD19;
    background-color: #fff;
    margin: 5px 5px 5px;
}
.item-selected {
  background: #ffffff url(../assets/img/iconfont-dagouxuanzhong.png) no-repeat right bottom;
  border-color: #ff4c4c;
  color:#ff4c4c;
}
</style>
